/**
 * 绑定12306账号
 * @email 626097912@qq.com
 * Created by dength on 2017/04/13
 * 待解决bug：小屏手机键盘遮挡输入框问题※※
 */
import React, { Component, PropTypes } from 'react';
import {
    View,
    Text,
    Modal,
    StyleSheet,
    Platform,
    ScrollView,
    TouchableOpacity,
    TextInput
} from 'react-native';
import Icon from 'react-native-vector-icons/EvilIcons';
import Icons from 'react-native-vector-icons/Ionicons';
import Constants from '../../base/constants';
import Buttom from '../../common/Buttom';

const BOX_INPUT = (Platform.OS === 'ios' ? 9 : 2);

export default class BindAccount extends Component {
    constructor(props) {
        super(props);
    }

    onResult() {
        this.props.onHideBindAccount();
    }

    render() {
        let { showBindAccount } = this.props;
        return (
            <View>
                <Modal
                    animationType='slide'
                    transparent={true}
                    visible={showBindAccount}
                    onShow={() => { } }
                    onRequestClose={() => { } } >
                    <View style={styles.modalStyle}>
                        <View style={styles.box}>
                            <View style={styles.box_top}>
                                <View>
                                    <Text style={{ color: 'white', fontSize: 14 }}>绑定12306账号</Text>
                                </View>
                                <TouchableOpacity
                                    onPress={() => { this.onResult() } }
                                    style={{ position: 'absolute', top: 15, right: 0, width: 30, height: 40 }}>
                                    <Icon name="close" size={22} color="#fff" />
                                </TouchableOpacity>
                            </View>
                            <View style={{ marginLeft: 10, marginRight: 10 }}>
                                <View style={styles.box_li}>
                                    <Icons name="ios-person-outline" size={24} color="#ACB5BD" style={{ paddingLeft: 8 }} />
                                    <TextInput
                                        style={styles.box_input}
                                        placeholder="请输入12306账号"
                                        placeholderTextColor="#ACB5BD"
                                        underlineColorAndroid="transparent"  //文本框的下划线颜色，透明为transparent
                                        numberOfLines={1}   //设置输入框的行数
                                        multiline={false}
                                        autoFocus={true} //自动获取input框焦点
                                        onChangeText={(text) => {
                                            this.setState({
                                                mobile: text
                                            });
                                        } }
                                        />
                                </View>
                                <View style={styles.box_li}>
                                    <Icons name="ios-unlock-outline" size={24} color="#ACB5BD" style={{ paddingLeft: 8 }} />
                                    <TextInput
                                        style={styles.box_input}
                                        placeholder="请输入12306密码"
                                        placeholderTextColor="#ACB5BD"
                                        underlineColorAndroid="transparent"
                                        numberOfLines={1}
                                        multiline={false} //设置输入框的行数。当multiline设置为true时使用它，可以占据对应的行数
                                        secureTextEntry={true} //为true，文本框会遮住之前输入的文字，这样类似密码之类的敏感文字可以更加安全
                                        onChangeText={(text) => {
                                            this.setState({ password: text })
                                        } }
                                        />
                                </View>
                            </View>
                            <View style={styles.binding_buttom}>
                                <Buttom
                                    //onPress={() => this._onPress('ScheduledSuccess')}
                                    containerStyle={{ height: 40, backgroundColor: '#FF8B00', alignItems: 'center', justifyContent: 'center', width: Constants.window.width - 60, borderRadius: 10 }}
                                    style={{ fontSize: 18, color: 'white' }}
                                    text={'确认'}
                                    />
                            </View>
                        </View>
                    </View>
                </Modal>
            </View>
        );
    }
}

BindAccount.propTypes = {
    showBindAccount: PropTypes.bool.isRequired,
    onShowBindAccount: PropTypes.func.isRequired,
    onHideBindAccount: PropTypes.func.isRequired
};

var styles = StyleSheet.create({
    modalStyle: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
    },
    box: {
        width: Constants.window.width, backgroundColor: 'white', position: 'absolute', top: 140, left: 0, height: Constants.window.height-140
    },
    box_top: {
        backgroundColor: '#FF8B00', width: Constants.window.width, height: 45, justifyContent: 'center', alignItems: 'center'
    },
    //输入框
    box_li: {
        flexDirection: 'row', height: 40, alignItems: 'center',
        borderBottomColor: '#D1D1D1', borderBottomWidth: 1
    },
    box_input: {
        marginLeft: 8, height: 40, fontSize: 12, textAlign: 'left',
        textAlignVertical: 'center', flex: 1, marginTop: BOX_INPUT
    },
    binding_buttom: {
        width: Constants.window.width, marginLeft: 30, marginRight: 30, marginTop: 20,
    },
});


//解决IOS部分样式不兼容
// iOS Styles
var iosStyles = StyleSheet.create({

})
// Android styles
const androidStyles = StyleSheet.create({

})
const sliderStyles = (Platform.OS === 'ios') ? iosStyles : androidStyles;